<style type="text/css">
    	.selListScrooll {
					  height:300px; 
					  overflow-y:auto;
			      }
		.my-item {
		        position: relative;
			    display: block;
			    padding: 10px 15px;
			    margin-bottom: 0px;
			    background-color: #fff;
			    border:0px;
			    border-bottom: 1px solid gainsboro;
		}
</style>
<!-- 模态框（Modal） -->
<div class="modal fade" id="listSelectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  >
    <div class="modal-dialog" style="width: 70%;">
        <div class="modal-content" id="listSelect">
            <div class="modal-header">
                <div class="col-sm-6">
                	<h4 align="center">{{leftTitle}}</h4>
                </div>
                <div class="col-sm-6">
					<h4 align="center">{{rightTitle}}</h4>
                </div>	
            </div>
            <div class="modal-body row" style="padding:10px 30px;">
                <div class="col-sm-6 selListScrooll" style="border-right: 1px solid gainsboro;">
                	<template v-for="(item, index) in leftData" >

						<a href="#" class="list-group-item my-item" @dblclick="leftSel(item,index)">
							<img v-if="item.imgId"  :src="$ImageUrl(item.imgId)"  width="30px"  class="img-thumbnail"  />
							{{item.name}}
						</a>
                	</template>
                </div>
                <div class="col-sm-6 selListScrooll" style="border-left: 1px solid gainsboro;" >
					<template v-for="(item, index) in rightData" >
                		<a href="#" class="list-group-item my-item" @dblclick="rightSel(item,index)">
							<img v-if="item.imgId"  :src="$ImageUrl(item.imgId)"  width="30px"  class="img-thumbnail"  />
							{{item.name}}
						</a>
                	</template>
                </div>	
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" @click="submit()" data-dismiss="modal">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script language="JavaScript">
	// boot up the demo
	var listSelect = new Vue({
		el: '#listSelect',
		data: {
			leftTitle: '左列表',
			rightTitle: '右列表',
			leftData: [],
			rightData: []
		},
		methods: {
			leftSel: function(item,index) {
				console.log(item.name + index);
				this.leftData.splice(index,1); //删除节点
				this.rightData.push(item); //加入节点
			},
			rightSel: function(item,index) {
				console.log(item.name + index);
				this.rightData.splice(index,1); //删除节点
				this.leftData.push(item);//加入节点
			},
			submit: function(){
				Vue.prototype.$listSelectSubmitCallBack(this.leftData,this.rightData);
			}
		},
		//加载节点
		created: function(){
			
		}
	});
	//向外暴露接口
	Vue.prototype.$registerSelListComponent = function (leftTitle,rightTitle,leftList , rightList , submitCallBack){
		console.log('$registerSelListComponent: start');
		listSelect.leftTitle = leftTitle;
		listSelect.rightTitle = rightTitle;
		listSelect.leftData = leftList;
		listSelect.rightData = rightList;
		Vue.prototype.$listSelectSubmitCallBack = submitCallBack;
		console.log('$registerSelListComponent: success');
	}

<!--demo-->
//	<!-- 按钮触发静态模态框 -->
//	<button class="btn btn-primary btn-lg" data-toggle="modal" data-backdrop="static" data-target="#listSelectModal">
//	    开始演示模态框
//	</button>
//
//	var leftData=[{name:"免费域名注册"},{name:"24*7 支持"},{name:"免费 Window 空间托管"},{name:"图像的数量"},{name:"每年更新成本"}];
//	var rightData= [{name:"免费域名注册"},{name:"24*7 支持"},{name:"免费 Window 空间托管"},{name:"图像的数量"},{name:"每年更新成本"}];
//	 //向外暴露接口
//	Vue.prototype.$registerSelListComponent(leftData,rightData,function(leftData,rightData){
//		console.log(leftData.length+' '+rightData.length);
//	});
</script>